<template>
	<div>
		<div class="title">会议列表</div>
		<ul>
			<li class="item border-bottom" v-for='item of meetList' :key='item.id' :title="item.id">
				<div class="item-info">
					<p class="item-theme">会议标题：{{ item.theme }}</p>
					<p class="item-roomid">会议室ID: {{ item.meeting_room_id }}</p>
					<p class="item-starttime">会议开始时间：{{ item.start_time}}</p>
					<p class="item-endtime">会议结束时间：{{ item.end_time}}</p>
					<p class="item-meetinglong">会议时长:{{ item.meeting_long }}</p>
					<p class="item-joinuser">会议人员：{{ item.user.name }}</p>
					<button class="btns" @click="cancelBtnClick(item.id)" >取消预约</button>
				</div>	
			</li>
		</ul>
	</div>
</template>

<script>
import axios from 'axios'
export default{
	name: "CxlMetting",
	data (){
		return{
			meetList: []
		}
	},
	// props: {
	// 	meetList: Array
	// },
	methods: {
		getMeetInfo(){
			axios.get('http://office.wtcxl.cn/meeting/get')
				.then(this.getMeetInfoSucc)
		},
		getMeetInfoSucc (res){
			res =  res.data
			if( res.data ){
				this.$nextTick(() =>{
					const meetList = res.data
					this.meetList = meetList
				})		
			}
		},
		cancelBtnClick: function(msg){
			console.log('kankan:', msg)
			axios.post('http://office.wtcxl.cn/meeting/cancel',{
				id: msg
			}).then(function (response) { 
				console.log("成功了", response )
			}).catch(function (error) { console.log("失败了"+ error ) });
		},
		
	},
		
	mounted (){
		this.getMeetInfo()
	} 
}

</script>

<style lang="stylus" scoped="">
	@import '~styles/mixins.styl'
	.title
		margin-top .2rem
		line-height .8rem
		background-color #eee
		text-indent .3rem
	.item
		display flex
		margin-bottom 0.3rem
		background: #f0f0f0;
		overflow hidden
		.item-info
			flex 1
			padding .1rem
			min-width 0
			.item-theme
				line-height .54rem
				font-size .32rem
				ellipsis()
			.item-roomid
				line-height .4rem
				color #ccc
				ellipsis()
			.item-starttime 
				line-height .54rem
				font-size .32rem
				ellipsis()
			.item-endtime
				line-height .54rem
				font-size .32rem
				ellipsis()
			.item-meetinglong
				line-height .54rem
				font-size .32rem
				ellipsis()
			.item-joinuser
				line-height .54rem
				font-size .32rem
				ellipsis()
			.btns 
				display block
				margin 0.2rem auto
				padding 0 0.2rem
				width 50%
				line-height .8rem
				border-radius .06rem
				background #ff9300
				color #fff
				text-align center
	.item-button
		display block
		margin .16rem auto
		padding 0 .2rem
		line-height .44rem
		background-color #ff9300
		border-radius .06rem
		color #fff
	.ipt 
		display block
		margin .3rem auto 0
		padding 0 0 0 .2rem
		width 90%
		height .8rem
		line-height .8rem
		border .01rem solid #ff9300
		border-radius .06rem
		box-sizing border-box
			
</style>